<template>
	<div class="content">
		<h1>编辑美食预约</h1>
	<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
   <el-form-item>
  <el-upload
  class="upload-demo"
  ref="upload"
  action="https://jsonplaceholder.typicode.com/posts/"
  :file-list="fileList"
  :on-change='changeUpload' accept="image/jpeg,image/gif,image/png,image/bmp"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip"  class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  <div slot="tip"   class="el-upload__tip"><img :src="baseUrl+img_url" width="100px"></div>
</el-upload>
 </el-form-item>
  <el-form-item>
  	<router-link to="/appointment/scenic">
     <el-button type="primary" @click="handleEdit">立即提交</el-button>
     </router-link>
  </el-form-item>
   
  </el-form-item>
</el-form>
	</div>
</template>

<script>
	import config from "@/assets/js/config.js";
	import config1 from "@/assets/js/config1.js";
export default{
	
	data() {
       return {
          page:0,
          id:0,
          img_url:"",
          baseUrl:config.baseUrl,
       	fileList: [],
        ruleForm: {
          name: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' }
          ],
         
      }
    }
      },
    methods:{
    	  submitUpload() {
        this.$refs.upload.submit();
        this.$notify({
					title: '',
					message: '上传成功',
					type: 'success'
				});
         this.id=this.$route.query.id;
     			
				this.$require.get(config.findFood, {
				        id:this.id,
				        name: this.ruleForm.name,
							img_url:this.img_url
				}).then((res) => {
				})
          },
        
     		handleEdit() {
     			this.$require.post(config.updateScenic, {
							name: this.ruleForm.name,
							id:this.$route.query.id,
							img_url: this.img_url
						}, {
							headers: {
								Authorization: "Bearer " + this.$store.state.token
							}
						}).then((res) => {
						})
			},
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      changeUpload(file, fileList) {
				
				var formData = new FormData();
				formData.append("files", file.raw);
				this.$require.post(config.uploadImg, formData, {
					headers: {
						Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res) => {
					this.img_url = res.data.data.img_url;
					
				})

			}
    },
   		created() {
   			console.log(config.updateScenic);
   			this.ruleForm.name = this.$route.query.list.name;
   			this.img_url =this.$route.query.list.img_url;   			
		}

    
}
</script>

<style lang="scss" scoped="scoped">
$htitle:32px; //标题文字大小
.content{
	padding: 0 50px;
}
h1{
	font-size: $htitle;
	margin: 21px 0;
}
</style>